<template>
  <WidgetContainer :data="data" class="search-bar-widget" context-menu
                   :class="{'search-bar-widget--top':this.expandSelect}"
  >
    <q-card class="search-card text-center">
      <div class="q-pa-md absolute-center full-width">
        <q-input ref="input" filled v-model="keywords"
                 class="z-top animate__headShake"
                 bottom-slots
                 label=""
                 @keydown="inputKeydown"
                 @keydown.enter="onEnterDown">
          <template v-slot:label>
            <div>
              <span>{{ `输入关键字使用 ${currentSearchEngine.name} ` }}</span>
              <span>搜索</span>
            </div>
          </template>
          <template v-slot:prepend>
            <q-fab color="amber"
                   text-color="black"
                   :icon="currentSearchEngine?currentSearchEngine.icon : ''"
                   direction="down"
                   v-model="expandSelect"
                   flat
                   square
            >
              <q-fab-action v-for="engine in searchEngines" :key="engine.id"
                            :color="searchEngine===engine.id? 'primary' : 'grey'"
                            text-color="white"
                            @click="switchSearchEngine(engine.id)"
                            :icon="engine.icon">{{ engine.name }}
              </q-fab-action>
            </q-fab>
          </template>
          <template v-slot:hint>
            <span>上下方向键切换引擎；回车键搜索结果。</span>
            <!-- <q-icon class="q-mx-xs" name="icon-up" size="18px"></q-icon>
            <span>与</span>
            <q-icon class="q-mx-xs" name="icon-down" size="18px"></q-icon>
            <span>切换引擎。</span> -->
          </template>
        </q-input>
      </div>
    </q-card>
  </WidgetContainer>
</template>

<script>
import WidgetContainer from '../components/WidgetContainer'
import widget from '../../../mixins/widget'

export default {
  name: 'SearchBarWidget',
  mixins: [widget],
  components: {
    WidgetContainer
  },
  data () {
    const widgetData = this.data.data || {}
    return {
      keywords: '',
      expandSelect: false,
      searchEngine: widgetData.searchEngine || 'baidu',
      searchEngines: [
        {
          id: 'baidu',
          name: '百度',
          icon: 'icon-baidu'
        },
        {
          id: 'google',
          name: '谷歌',
          icon: 'icon-google'
        },
        {
          id: 'zhihu',
          name: '知乎',
          icon: 'icon-zhihu-square-fill'
        },
        {
          id: 'bing',
          name: '必应',
          icon: 'icon-bing'
        }
      ]
    }
  },
  computed: {
    currentSearchEngine () {
      return this.searchEngines.find(e => e.id === this.searchEngine)
    }
  },
  inject: ['workbenchEventBus'],
  mounted () {
    this.workbenchEventBus.on('keydown', this.onWorkbenchKeydown)
  },
  beforeUnmount () {
    this.workbenchEventBus.off('keydown', this.onWorkbenchKeydown)
  },
  methods: {
    onEnterDown () {
      this.openSearch()
    },
    openSearch (searchEngine) {
      searchEngine = searchEngine || this.searchEngine
      if (searchEngine === 'baidu') {
        window.open(`https://www.baidu.com/s?wd=${this.keywords}`, '_blank')
      }
      // https://www.google.com.hk/search?q=123
      if (searchEngine === 'google') {
        window.open(`https://www.google.com.hk/search?q=${this.keywords}`, '_blank')
      }
      // https://www.zhihu.com/search?type=content&q=123
      if (searchEngine === 'zhihu') {
        window.open(`https://www.zhihu.com/search?type=content&q=${this.keywords}`, '_blank')
      }
      // https://cn.bing.com/search?q=123
      if (searchEngine === 'bing') {
        window.open(`https://cn.bing.com/search?q=${this.keywords}`, '_blank')
      }
    },
    onWorkbenchKeydown (event) {
      if (event.code === 'Space') {
        this.$refs.input.focus()
      }
    },
    switchSearchEngine (engineId) {
      this.searchEngine = engineId
      this.formData.data.searchEngine = engineId
      this.saveWidget()
    },
    inputKeydown (event) {
      let index = this.searchEngines.findIndex(e => e.id === this.searchEngine)
      if (event.code === 'ArrowDown') {
        index = index + 1 >= this.searchEngines.length ? 0 : index + 1
        this.searchEngine = this.searchEngines[index].id
      }
      if (event.code === 'ArrowUp') {
        index = index === 0 ? this.searchEngines.length - 1 : index - 1
        this.searchEngine = this.searchEngines[index].id
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-bar-widget {
  &--top {
    z-index: 100 !important;
  }

  .search-card {
    min-width: 228px;
    min-height: 106px;
  }
}
</style>
